<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 15 - Filters</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
<script src="pixi.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(630, 410);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("depth_blur_BG.jpg");
stage.addChild(bg);
var littleDudes = PIXI.Sprite.fromImage("depth_blur_dudes.jpg");
littleDudes.position.y = 100;
stage.addChild(littleDudes);
var littleRobot = PIXI.Sprite.fromImage("depth_blur_moby.jpg");
littleRobot.position.x = 120;
stage.addChild(littleRobot);
var blurFilter1 = new PIXI.BlurFilter();
var blurFilter2 = new PIXI.BlurFilter();
littleDudes.filters = [blurFilter1];
littleRobot.filters = [blurFilter2];
renderer.view.style.position = "absolute"
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
var count = 0;
var switchy = false;
stage.click = stage.tap = function()
{
switchy = !switchy
if(!switchy)
{
//stage.filters = [filter];
}
else
{
// stage.filters = null;
}
}
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.anchor.y = 1;
logo.position.x = 630
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 400;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
requestAnimFrame(animate);
function animate() {
count += 0.01;
var blurAmount = Math.cos(count) ;
var blurAmount2 = Math.sin(count) ;
blurFilter1.blur = 1/300 * (blurAmount);
blurFilter2.blur = 1/300 * (blurAmount2);
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>
